<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Label</view>
			<view class="tui-page__desc">用来改进表单组件的可用性，将控件放在该标签下，当点击时，就会触发对应的控件。目前可以绑定的控件有：tui-checkbox, tui-radio,
				tui-switch。</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title thorui-cells">switch</view>
			<tui-label>
				<tui-list-cell>
					<view class="thorui-flex__between">
						<text>ON/OFF</text>
						<tui-switch></tui-switch>
					</view>
				</tui-list-cell>
			</tui-label>
			<view class="tui-title thorui-cells">radio</view>
			<tui-radio-group>
				<tui-label>
					<tui-list-cell>
						<view class="thorui-flex__between">
							<text>选项一</text>
							<tui-radio value="1"></tui-radio>
						</view>
					</tui-list-cell>
				</tui-label>
				<tui-label>
					<tui-list-cell>
						<view class="thorui-flex__between">
							<text>选项二</text>
							<tui-radio value="2"></tui-radio>
						</view>
					</tui-list-cell>
				</tui-label>
			</tui-radio-group>
			<view class="tui-title thorui-cells">checkbox</view>
			<tui-checkbox-group>
				<tui-label>
					<tui-list-cell>
						<view class="thorui-flex__between">
							<text>与周公下棋</text>
							<tui-checkbox value="1"></tui-checkbox>
						</view>
					</tui-list-cell>
				</tui-label>
				<tui-label>
					<tui-list-cell>
						<view class="thorui-flex__between">
							<text>读书</text>
							<tui-checkbox value="2"></tui-checkbox>
						</view>
					</tui-list-cell>
				</tui-label>
			</tui-checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;
	}
</style>
